<template>
  <div class="footer-box">
    <ul>
      <li>
        <router-link to="/" exact-active-class="active">
          <div>
            <span class="iconfont icon-L_zhuye2_zheng"></span>
            <p>首页</p>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/Search" exact-active-class="active">
          <div>
            <span class="iconfont icon-faxian"></span>
            <p>发现</p>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/Vip" exact-active-class="active">
          <div>
            <span class="iconfont icon-vip"></span>
            <p>专享</p>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/Mine" exact-active-class="active">
          <div>
            <span class="iconfont icon-wode"></span>
            <p>我的</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
@import url(../assets/font/iconfont.css);

.footer-box {
  width: 100%;
  height: 0.6rem;
  background-color: #fff;
  /* background-color: red; */
  border-top: 2px solid #e6e6e6;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.footer-box ul {
  width: 100%;
  height: 100%;
  display: flex;
}
.footer-box ul li {
  width: 0.3rem;
  height: 100%;
  margin: 0 0.33rem;
  font-size: 0.13rem;
  text-align: center;
  color: #cecece;
}
.footer-box ul li .iconfont {
  display: block;
  margin: 0.1rem 0;
  font-size: 0.2rem;
  /* color: #cecece; */
}
a,
router-link {
  text-decoration: none;
  color: #cecece;
}

.active,
.active .iconfont {
  color: #ff5959;
}
</style>